<template>
    <!--调度过程-->
    <div class="view" :style="{ '--theme': $store.getters.themeColor }">
        <el-row>
            <el-table border style="width: 100%" :data="viewDataSouse">
                <el-table-column label="操作人" prop="processName"  align="center"></el-table-column>
                <el-table-column label="接收时间" prop="flowNodeTime"  align="center"></el-table-column>
                <el-table-column label="完成时间" prop="flowEndTime"  align="center"></el-table-column>
                <el-table-column label="环节类型" prop="flowLinkType"  align="center">
                    <template slot-scope="scope">
                        <span>{{ getFlowLinkTypeName(scope.row) }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="选择环节" prop="nextLinkName" align="center"></el-table-column>
                <el-table-column label="选择处理人" align="center" :show-overflow-tooltip="false">
                    <template slot-scope="scope">
                      <CustomTooltip :content="scope.row.enableAcceptanceMode === '1' || scope.row.enableAcceptanceMode === '2' ? '' : scope.row.nextLinkProcessName"></CustomTooltip>
                    </template>
                </el-table-column>
                <el-table-column label="说明" align="center" :show-overflow-tooltip="false">
                  <template slot-scope="{row}">
                    <CustomTooltip :content="row.remark"></CustomTooltip>
                  </template>
                </el-table-column>
                <el-table-column label="附件" width="100" align="center">
                    <template slot-scope="{row}">
                        <el-button type="text" size="mini" @click="seeClick(row)" v-if="row.orderFileList?.length">查看</el-button>
                    </template>
                </el-table-column>
                <el-table-column v-if="viewDataSouse.some(item => item.nextLinkId == 6 || item.nextLinkId == 0 || item.nextLinkId == 7)" label="关闭说明" align="center" :show-overflow-tooltip="false">
                  <template slot-scope="{row}">
                    <CustomTooltip :content="row.closeRemark"></CustomTooltip>
                  </template>
                </el-table-column>
            </el-table>
        </el-row>
    </div>
</template>

<script>
import CustomTitle from '@/components/eventManagement/Title.vue'
import EventFilePreview from '../components/EventFilePreview.js'
import CustomTooltip from "@/components/table/CustomTooltip.vue";
export default {
    name: 'schedulingProcess',
    components: {
      CustomTooltip,
        CustomTitle
    },
    props: {
        viewDataSouse: {
            //视图数据源
            type: Array,
            default: []
        }
    },
    data() {
        return {
            files: {
                imgs: [],
                videos: [],
                isOpen: false
            }
        }
    },
    methods: {
        headerCellStyle({ row, column, rowIndex, columnIndex }) {
            return (
                'background: #F8F8F8;\n' +
                'border-radius: 5px 0px 0px 0px;\n' +
                'border: 1px solid #EEEEEE;\n' +
                'font-size: 14px;\n' +
                'font-family: PingFangSC-Regular, PingFang SC;\n' +
                'font-weight: 400;\n' +
                'color: #333333;\n' +
                'height: 40px;'
            )
        },
        typeFun(row) {
            if (row.processName == '') {
                return ''
            }
            return row.judgedType == '3' ? '部门调度' : '人员调度' //3-调度部门 4-个人
        },
        filesCancelFun(data) {
            this.files.isOpen = data
        },
        seeClick(row) {
            EventFilePreview.show({ files: row.orderFileList })
            /**
      let _this = this;
      //附件
      _this.files.imgs = [];
      if (row.orderFileList?.length > 0) {
        for (let i = 0; i < row.orderFileList?.length; i++) {
          _this.files.imgs.push(row?.orderFileList[i]?.resourceUrl);
        }
      }
      if (_this.files.imgs.length > 0) {
        _this.files.isOpen = true;
      } else {
        _this.$message.warning("未上传附件！");
        _this.files.isOpen = false;
      }
       */
        },
        getFlowLinkTypeName(val) {
            switch (val.flowLinkType) {
                case '0':
                    return '正常流转'
                case '1':
                    return '转派'
                case '2':
                    return '回退'
                case '3':
                    return '受理'
            }
            return ''
        }
    }
}
</script>

<style lang="scss" scoped>
$theme: var(--theme);
.view {
    height: 100%;
    background: rgba(255, 255, 255, 0.85);
    // box-shadow: 0px 10px 12px 3px rgba(213, 210, 233, 0.55);
    //border-radius: 8px;
}
// .title-class {
//   display: inline-block;
// }
// .title {
//   height: 3vh;
//   background: $theme;
//   border-radius: 17px;
//   margin-top: 1vh;
//   /*margin-left: 3vh;*/
//   display: flex;
//   align-items: center;
// }

.icon {
    width: 8px;
    height: 8px;
    background: #ffffff;
    border-radius: 50%;
    margin-left: 1vh;
    margin-right: 1vh;
}
.title-name {
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    line-height: 22px;
    margin-right: 2vh;
}
.titleName {
    float: left !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: 100%;
    font-size: 10px;
    padding: 0.3vh 0px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #98a0a7;
}

.value {
    float: left !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: 100%;
    padding: 0.3vh 0px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    display: contents;
    font-size: 10px;
}
/deep/ .spanVal {
    float: left !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: 100%;
    padding: 0.3vh 0px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
}
.el-row {
    margin-bottom: 2vh;
}
</style>
